import React, { Component } from 'react';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import {
  AutoComplete,
  Button,
  Col,
  DatePicker,
  message,
  Row,
  Tooltip,
} from 'antd';
// css
import "../index.scss";
import moment from 'moment';

//组件 搜索区域
class SearchDiv extends Component {
  constructor(props) {
    super(props)

    this.state = {
      //实时输入框的值
      time_range_start: null,
      time_range_end: null,

      //自动补充的一些数据
      ope_dataSource: [],
      line_dataSource: [],
      ip_dataSource: [],
    }

    //筛选值的函数 用于智能联想
    this.Screening_value = function(value, Candidates) {
      let match_value = []
      for (let Candidate of Candidates) {
        if (Candidate.indexOf(value) !== -1) {
          match_value.push(Candidate)
        }
      }
      return match_value
    }
  }

  //处理函数  在正在输入运营商框时候
  handleOperatorSearch = value => {
    this.setState({
      ope_dataSource: !value
        ? []
        : this.Screening_value(value, this.props.opes),
    })
  }

  //处理函数 运营商搜索框值改变时候
  handleOperatorChange = value => {
    this.setState({ ope_value: value })
  }

  //处理函数 在正在输入线路值时候
  handleLineSearch = value => {
    this.setState({
      line_dataSource: !value
        ? []
        : this.Screening_value(value, this.props.lines),
    })
  }

  //处理函数  线路搜索框值改变时
  handleLineChange = value => {
    this.setState({ line_value: value })
  }

  //处理函数 在正在输入线路值时候
  handleIPSearch = value => {
    this.setState({
      ip_dataSource: !value ? [] : this.Screening_value(value, this.props.ips),
    })
  }

  //处理函数  线路搜索框值改变时
  handleIPChange = value => {
    this.setState({ ip_value: value })

    this.props.transferSelectIp(value)
  }

  //处理函数  时间框值改变时候
  handleRangeChange = value => {
      console.log(value)
    this.setState({
      time_range_start: value[0],
      time_range_end: value[1],
    })
  }

  //处理函数  点击搜索按钮时候
  handleClickSearchBtn = value => {
    //空值 错误信息
    if (
      !this.state.time_range_start 
    ) {
      message.error('请输入搜索条件')
    } else {
      //构造请求参数
      let params = {}
      if (this.state.time_range_start) {
        params['time_range_start'] = this.state.time_range_start.format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }
      if (this.state.time_range_end) {
        params['time_range_end'] = this.state.time_range_end.format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }

      //调用父级组件函数 进行请求
      this.props.onHandleSearch(params)
    }
  }

  onHandleClickRedoBtn = value => {
    this.setState({
      time_range_start: null,
      time_range_end: null,
    })
    this.props.onHandleReset()
  }

  render() {
    // const { ope_dataSource } = this.state

    const { RangePicker } = DatePicker

    return (
      <div className="searchDiv">
        <Row>
          <Col span={4}>
            账号:&nbsp;&nbsp;
            <AutoComplete
              // v3 => v4 options
              // dataSource={ope_dataSource}
              // onSearch={this.handleOperatorSearch}
              // onChange={this.handleOperatorChange}
              // value={this.state.ope_value}
              allowClear={true}
              placeholder="请输入"
              style={{width: '120px'}}
            />
          </Col>
          <Col span={4}>
            事业部:&nbsp;&nbsp;
            <AutoComplete
              // dataSource={line_dataSource}
              // onSearch={this.handleLineSearch}
              // onChange={this.handleLineChange}
              // value={this.state.line_value}
              allowClear={true}
              placeholder="请输入"
              style={{width: '120px'}}
            />
          </Col>
          <Col span={4}>
            平台:&nbsp;&nbsp;
            <AutoComplete
              // dataSource={ip_dataSource}
              // onSearch={this.handleIPSearch}
              // onChange={this.handleIPChange}
              // value={this.state.ip_value}
              allowClear={true}
              placeholder="请输入"
              style={{width: '120px'}}
            />
          </Col>
          <Col span={8}>
            时间:&nbsp;&nbsp;
            <RangePicker
              value={[this.state.time_range_start, this.state.time_range_end]}
              ranges={{
                'Today': [moment(), moment()],
                'This Week': [moment().startOf('week'), moment().endOf('week')],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
              }}
              onChange={this.handleRangeChange}
              style={{ marginBottom: '20px' }} 
              showTime
			    />
          </Col>
          <Col span={4}>
            <div className="btndiv">
              <Button
                type="primary"
                shape="round"
                icon={<SearchOutlined />}
                onClick={this.handleClickSearchBtn}
              >
                搜索
              </Button>
              &nbsp;&nbsp;
              <Tooltip title="重置数据">
                <Button
                  type="default"
                  shape="circle"
                  icon={<RedoOutlined />}
                  className="btn"
                  onClick={this.onHandleClickRedoBtn}
                />
              </Tooltip>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default SearchDiv
